<template>
	<view class="wrap">
		<view class="topSearch u-flex">
			<view class="dateTime">
				<text>资料类型：</text>
				<input placeholder="请选择学习资料类型" disabled="true" @click="listShow = true" />
				<u-button style="margin-left:10rpx;" type="primary" size="mini">确认</u-button>
			</view>
		</view>
		<view class="list">
			<view class="item" @click="openPage('/pages/workbench/learning/classroom/dataBook')">
				<image src="@/static/images/book.jpg" mode="widthFix"></image>
				<view>这是书的名称</view>
			</view>
			<view class="item" @click="openPage('/pages/workbench/learning/classroom/dataBook')">
				<image src="@/static/images/book.jpg" mode="widthFix"></image>
				<view>这是书的名称</view>
			</view>
			<view class="item" @click="openPage('/pages/workbench/learning/classroom/dataBook')">
				<image src="@/static/images/book.jpg" mode="widthFix"></image>
				<view>这是书的名称</view>
			</view>
			<view class="item" @click="openPage('/pages/workbench/learning/classroom/dataBook')">
				<image src="@/static/images/book.jpg" mode="widthFix"></image>
				<view>这是书的名称</view>
			</view>
			<view class="item" @click="openPage('/pages/workbench/learning/classroom/dataBook')">
				<image src="@/static/images/book.jpg" mode="widthFix"></image>
				<view>这是书的名称</view>
			</view>
			<view class="item" @click="openPage('/pages/workbench/learning/classroom/dataBook')">
				<image src="@/static/images/book.jpg" mode="widthFix"></image>
				<view>这是书的名称</view>
			</view>
			<view class="item" @click="openPage('/pages/workbench/learning/classroom/dataBook')">
				<image src="@/static/images/book.jpg" mode="widthFix"></image>
				<view>这是书的名称</view>
			</view>
			<view class="item" @click="openPage('/pages/workbench/learning/classroom/dataBook')">
				<image src="@/static/images/book.jpg" mode="widthFix"></image>
				<view>这是书的名称</view>
			</view>
		</view>
		<u-select mode="single-column" :list="nameList" v-model="listShow" @confirm="selectConfirm('type')"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listShow:false,
				nameList: [
					{value:'灭火救援',label:'灭火救援'},
					{value:'政治教育类',label:'政治教育类'},
					{value:'队伍管理',label:'队伍管理'},
					{value:'后勤保障',label:'后勤保障'},
					{value:'行政执法类',label:'行政执法类'},
				],
			}
		},
		methods:{
			openPage(path) {
				this.$u.route({ 
					url: path
				})
			},
			timerConfirm(e){
				
				this.myDate = `${e.year}-${e.month}-${e.day}`
			}
		}
	}
</script>

<style lang="scss" scoped>
.topSearch{
	padding:20rpx;
	.dateTime{
		line-height: 56rpx;
		font-size:22rpx;
		text{
			float:left;
		}
		input{
			font-size:22rpx;
			float:left;
			width: 300rpx;
			height:56rpx;
			line-height: 56rpx;
			padding:0 10rpx;
			border:1px solid #d9d9d9;
			border-radius:0.3em;
		}
	}
}
.list{
	overflow: hidden;
	padding:0 10rpx;
	.item{
		width: 33.33%;
		padding:10rpx;
		float:left;
		text-align: center;
		image{
			width: 100%;
			height:160px;
		}
	}
}
</style>
